import React, { PureComponent } from 'react';
import { connect } from 'dva';
import querystring from 'querystring';
import url from 'url';
import moment from 'moment';
import { routerRedux } from 'dva/router';
import { Card, Button, Menu, Tooltip, Icon, Steps, message } from 'antd';
import styles from './TaskActivity.less';

const Step = Steps.Step;

@connect(state => ({
  taskActivity: state.auction.taskActivity,
}))
export default class TaskActivity extends PureComponent {
  state = {
  }
  handleDeliver = (href) => {
    const urlObj = url.parse(href);
    const query = querystring.parse(urlObj.query);
    console.log(query);
    this.props.dispatch(routerRedux.push(`/writer/task/create?actType=1&activityId=${query.activityId}&template=${query.template}`));
  }
  render() {
    const { taskActivity } = this.props;
    const query = querystring.parse(this.props.location.search.substr(1));
    const activity = taskActivity.find(item => item.id === Number(query.activityId)) || {};
    console.log(activity,this.props);
    return (
      <div>
        <div className={styles.ice_layout_main}>
          <div className={styles.icd_activity_detail_page}></div>
          <div className={styles.creator_block} style={{ backgroundColor: 'rgb(255, 255, 255)', borderRadius: '2px', minHeight: '60px', padding: '20px' }}>
            <h4 className={styles.creator_block_title}>
              {activity.name}
            </h4>
            <div style={{ fontSize: '12px' }}>
              <span style={{ color: 'rgb(51, 51, 51)' }}>活动发起方：</span>
              <span style={{ color: 'rgb(153, 153, 153)' }}>{activity.appKey}</span>
            </div>
            <div style={{ color: 'rgb(153, 153, 153)', margin: '20px 0px', lineHeight: '1.8', fontSize: '12px' }}>
              <div>
                当前投稿饱和度：
              <span style={{ color: 'rgb(102, 170, 255)' }}>{activity.saturatedStr}</span>
                <span style={{ marginLeft: '5px' }}></span>
              </div>
            </div>
            <div className={styles.creator_post_point}>
              <div className={styles.creator_post_point__body}>
                {activity.typeList && activity.typeList.map((item, index) =>
                  <div key={`activity${index}`} className={styles.creator_post_point__item}>
                    <a style={{ cursor: 'pointer' }} onClick={() => this.handleDeliver(item.href)}>
                      <div className={styles.creator_post_point__icon}>
                        <div className={styles.ice_img} style={{ display: 'inline-block', width: '70px', height: ' 70px', overflow: 'hidden' }}>
                          <div style={{ width: '70px', height: '70px', display: ' table-cell', verticalAlign: 'middle', textAlign: 'center' }}>
                            <img style={{ width: 'auto', height: 'auto', maxWidth: '70px', maxHeight: '70px' }}
                              src={item.icon} />
                          </div>
                        </div>
                      </div>
                      <div className={styles.creator_post_point__title} style={{ color: 'rgb(51, 51, 51)' }}>
                        {item.title}
                  </div>
                    </a>
                  </div>
                )}
              </div>
            </div>
          </div>
          <div style={{ height: '20px' }}></div>
          <div className={styles.icd_activity_detail}>
            <div className={styles.icd_activity_detail_wrapper}>
              <div className={styles.icd_activity_detail_content}>
                <div className={styles.icd_activity__title}>活动时间</div>
                <div style={{ padding: '10px 0px 20px', width: '530px' }}>
                  <Steps progressDot current={0}>
                    <Step title="投稿截止" description={moment(activity.recruitEndTime).format('YYYY-MM-DD HH:mm:ss')} />
                    <Step title="活动开始" description={moment(activity.activityStartTime).format('YYYY-MM-DD HH:mm:ss')} />
                    <Step title="活动结束" description={moment(activity.activityEndTime).format('YYYY-MM-DD HH:mm:ss')} />
                  </Steps>
                </div>
                <div className={styles.icd_activity__title}>
                  规则说明
                </div>
                <div className={styles.icd_activity__desc} dangerouslySetInnerHTML={{ __html: activity.rule }}>

                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}
